<template>
   <div id="contractManagement">
<!--     头部-->
     <header>
       <h3>万事达-TMS<span>客户端</span></h3>
       <div class="divHeader">订单管理-订单</div>
     </header>
     <div id="dingD"><span>*</span>订单号：系统自动生成</div>
     <hr>
<!--     搜素功能模块-->
     <div id="gongNeng">
       <div class="gongNeng_first">
         <el-select v-model="value" placeholder="收货人" class="shouHuo">
           <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
           </el-option>
         </el-select>
         <el-input class="input" v-model="input" placeholder="请输入内容"></el-input>

         <el-select v-model="value" placeholder="下单时间" class="xiaDan">
           <el-option
               v-for="item in options2"
               :key="item.value"
               :label="item.label"
               :value="item.value">
           </el-option>
         </el-select>

         <!--       时间选择-->
         <div class="block">
           <el-date-picker
               v-model="value1"
               type="date"
               placeholder="开始日期">
           </el-date-picker>
         </div>
         <div class="line">-</div>
         <div class="block">
           <el-date-picker
               v-model="value1"
               type="date"
               placeholder="结束日期">
           </el-date-picker>
         </div>
<!--         搜素框-->
         <el-button type="primary" icon="el-icon-search" class="search">搜索</el-button>
       </div>
<!--       功能第二排-->
       <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="全部 (5)" >
          <!-- 全部 (5) -->
          <!--       功能第3排-->
          <div>
            <el-button type="info" @click="addOrder">新增订单</el-button>
            <el-button type="info" @click="chaKan">下订单</el-button>
          </div>
          <!--     table模块-->
          <div class="table">
            <el-table
                :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
                ref="multipleTable"
                :data="currPageData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="订单编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="下单日期"
                  width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="合同编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="目的地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="收货方"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="货物名称"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="重量KG"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="运输费"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="结算时间"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票状态"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票金额"
                  show-overflow-tooltip>
              </el-table-column>
            </el-table>
      <!--    分页   -->
            <el-pagination
                class="fenYe"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="待审核 (4)">
          <!-- 待审核 (4) -->
          <!--     table模块-->
          <div class="table">
            <el-table
                :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
                ref="multipleTable"
                :data="currPageData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="订单编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="下单日期"
                  width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="合同编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="目的地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="收货方"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="货物名称"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="重量KG"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="运输费"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="结算时间"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票状态"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票金额"
                  show-overflow-tooltip>
              </el-table-column>
            </el-table>
      <!--    分页   -->
            <el-pagination
                class="fenYe"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        
        </el-tab-pane>
        <el-tab-pane label="有效报价 (3)" >
            
          <!-- 待审核 (4) -->
          <!--     table模块-->
          <div class="table">
            <el-table
                :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
                ref="multipleTable"
                :data="currPageData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="订单编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="下单日期"
                  width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="合同编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="目的地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="收货方"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="货物名称"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="重量KG"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="运输费"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="结算时间"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票状态"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票金额"
                  show-overflow-tooltip>
              </el-table-column>
            </el-table>
      <!--    分页   -->
            <el-pagination
                class="fenYe"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        
        
        </el-tab-pane>
        <el-tab-pane label="过期报价(5)">
          
          <!-- 待审核 (4) -->
          <!--     table模块-->
          <div class="table">
            <el-table
                :header-cell-style="{background:'rgb(220,220,220)',color: 'black'}"
                ref="multipleTable"
                :data="currPageData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="订单编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  label="下单日期"
                  width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="合同编号"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="目的地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="收货方"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="货物名称"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="始发地"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="重量KG"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="运输费"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="结算时间"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票状态"
                  show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                  prop="address"
                  label="开票金额"
                  show-overflow-tooltip>
              </el-table-column>
            </el-table>
      <!--    分页   -->
            <el-pagination
                class="fenYe"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage1"
                :page-sizes="[1, 2, 3, 4]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.length">
            </el-pagination>
          </div>
        
        
        </el-tab-pane>
      </el-tabs>
       
     </div>

   </div>
</template>

<script>
export default {
  name: "ContractManagement",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '收货人'
      }, {
        value: '选项2',
        label: '始发地'
      }, {
        value: '选项3',
        label: '目的地'
      }, {
        value: '选项4',
        label: '订单号'
      }, {
        value: '选项5',
        label: '货名'
      },{
        value: '选项6',
        label: '合同编号'
      }
      ],
      options2:[
        {
          value: '选项11',
          label: '下单时间'
        },{
          value: '选项12',
          label: '报价有效期'
        }

      ],
      value: '',
      input:'',
      value1: '',
      value2: '',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普518 弄'
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普18 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市 弄'
      }],
      multipleSelection: [],
      currentPage1:1,
      currentPage4: 4,
      pageSize:3,
      currPageData:[],
      activeName:''
    }
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val+"2222222333");
    },
    // 监听pagesize 改变的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      console.log(val);
      this.pageSize = val;
      this.handleCurrentChange(1);
    },
    //监听页码改变的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currPageData = this.tableData.slice((val-1)*this.pageSize,val*this.pageSize);
    },
    addOrder(){
      this.$router.push('./addorder')
    },
    chaKan(){
      this.$router.push('./inquiry')
    }
  },
  mounted() {
    this.currPageData = this.tableData.slice(0,this.pageSize);

  }


}
</script>

<style scoped lang="less">
/deep/.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  background-color: #b3c0d1;
  border-radius: 3px;
  // border: 1px solid #b3c0d1;
}

/deep/.el-tabs__item:hover {
  cursor: pointer;
  background-color: #c8cfd8bb;
  color: black;
}
/deep/.el-tabs__item.is-active {
  color: black;
  background-color: #c8cfd8bb;
}
header{
  text-align: left;
  /*border:1px solid;*/
}
#gongNeng{
  margin-top:10px;
  /*border:1px solid;*/
  text-align: left;
}
.gongNeng_first{
  display: flex;
  margin:10px 0;

}
.shouHuo{
  margin-right:10px;
}
.xiaDan,.search{
  margin-left: 20px;
}

.input{
  height: 40px;
  width: 260px;
}
.line{
  font-size: 30px;
}
.block{
  width: 220px;
  height: 40px;
}
li:hover{
  background: #CCCCCA;
}
.active{
  background: #CCCCCA;
}
.table{
  margin-top:10px;
}
.fenYe{
  margin-top:20px;
}
span{
   color: red;
 }
.divHeader{
  background: rgb(153,169,191);
  font-size: 25px;
}
</style>